<template>
  <div class="agent-shop"
    style="--van-nav-bar-background:rgba(0,0,0,0);--nav-bar-text-color:#ffffff;--van-nav-bar-title-text-color:#ffffff;--van-nav-bar-icon-color:#ffffff;">
    <!-- 顶部安全区和导航栏 -->
    <van-nav-bar v-if="isApp" ref="safeAreaInsetTopRef" safe-area-inset-top />
    <van-nav-bar ref="TitleNavbarRef" title="我的代理商">
      <template #left>
        <van-icon name="arrow-left" size="24" @click="pageBack" />
      </template>
    </van-nav-bar>
    <!-- 顶部安全区和导航栏 -->
    <div class="search-box">
      <div class="search-btn" @click="pageJump('/daizhuc')">
        <van-icon size="14" name="add-o" />
        <span>添加代理</span>
      </div>
      <div class="search-btn" @click="pageJump('/yongConfig')">
        <van-icon size="14" name="gold-coin-o" />
        <span>分佣设置</span>
      </div>
      <div class="search-input">
        <van-search class="input-item" v-model="state.searchForm.keyword" shape="round" background="rgba(0,0,0,0)"
          placeholder="请输入搜索关键词" @search="searchHandle" />
      </div>
    </div>
    <div class="shop-list">
      <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
        <van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="getListData">
          <div class="list-item" v-for="item in state.listData" :key="item">
            <div class="item-info">
              <div>{{ item.shopName }}</div>
              <div :class="`smrz${item.certificationStatus}`">{{ certificationStatus[item.certificationStatus] }}</div>
            </div>
            <div class="item-info-s">
              <div>
                <span>运营状态：</span>
                <span :class="`yyzt${item.operationalStatus}`">{{ operationalStatus[item.operationalStatus] }}</span>
              </div>
              <div>
                <span>联系方式：</span>
                <span>{{item.contactsName}}({{item.contactsPhone}})</span>
                <div class="copy-btn" @click="handleCopy(item.contactsPhone)">复制</div>
              </div>
              <div>
                <span>代理时间：</span>
                <span>{{ getDateTime(item.createTime)[6] }}</span>
              </div>
            </div>
            <div class="num-box">
              <div>
                <span>月发货</span>
                <span>{{ item.staticsInfo?.monthLogist || 0 }}</span>
              </div>
              <div>
                <span>月激活</span>
                <span>{{ item.staticsInfo?.monthActive || 0 }}</span>
              </div>
              <div>
                <span>激活率</span>
                <span>{{ (((item.staticsInfo?.allActive || 0) / (item.staticsInfo?.allLogist || 1)) * 100).toFixed(2) }}%</span>
              </div>
              <div>
                <span>总发货</span>
                <span>{{ item.staticsInfo?.allLogist || 0 }}</span>
              </div>
              <div>
                <span>总激活</span>
                <span>{{ item.staticsInfo?.allActive || 0 }}</span>
              </div>
            </div>
            <div class="item-footer-btn" @click="pageJump('/shopYongConfig',{shopId:item.shopId,shopName:item.shopName})">
              <van-icon size="16" name="setting-o" />
              <span>佣金设置</span>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import { getDateTime } from "@/utils/utils";
import { showToast } from "vant";
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import api from './api'

const store = useStore()
const router = useRouter()
const isApp = store.state.isApp

const operationalStatus = {
  '0': '拉黑',
  '1': '正常',
  '2': '邀请码冻结',
}
const certificationStatus = {
  '0': '未实名',
  '1': '已实名',
}

const state = reactive({
  refreshing: false,
  loading: false,
  finished: false,
  page: 1,
  size: 20,
  listData: [],
  searchForm: {},
})

onMounted(() => {
  store.commit("setNavBar", { show: false })
})

const pageBack = () => {
  router.go(-1)
}

const pageJump = (path, data = {}) => {
  router.push({ path, query: data })
}

// 下拉刷新
const onRefresh = () => {
  state.finished = false
  state.loading = true
  getListData()
}

// 加载列表数据
const getListData = () => {
  if (state.refreshing) {
    state.page = 1
    state.listData = []
    state.refreshing = false
  }
  const obj = {
    page: state.page,
    size: state.size,
    ...state.searchForm
  }
  api.searchConsumer(obj).then(res => {
    state.loading = false
    if (res.code == '200') {
      const { records, total } = res.data
      if (records?.length < state.size) {
        state.finished = true
      }
      state.listData.push(...records)
      state.page++
    } else {
      state.finished = true
      showToast(res.msg)
    }
  }).catch(err => {
    state.loading = false
    state.finished = true
    console.log(err)
  })
}

const searchHandle = () => {
  state.refreshing = true
  onRefresh()
}

const handleCopy = (value) => {
  const input = document.createElement('input');
  document.body.appendChild(input)

  input.setAttribute('value', value);
  input.select();
  if (document.execCommand('copy')) {
    document.execCommand('copy');
    showToast('已复制到剪贴板')
  }
  document.body.removeChild(input);
}
</script>

<style lang="scss" scoped>
.agent-shop {
  height: 100%;
  padding-top: 0 !important;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  background: linear-gradient(to bottom, #488bfe, #f3f3f3 30%);
  .search-box {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-size: 10px;
    --van-cell-font-size: 12px;
    --van-search-padding: 0;
    box-sizing: border-box;
    padding: 10px 15px;
    gap: 8px;
    .search-btn {
      display: flex;
      align-items: center;
      color: #ffffff;
      background: #265efe;
      flex-shrink: 0;
      box-sizing: border-box;
      padding: 10px;
      border-radius: 25px;
      > span {
        margin-left: 2px;
      }
    }
    .search-input {
      flex-grow: 1 !important;
      .input-item {
        width: 100%;
      }
    }
  }
  .shop-list {
    flex-grow: 1;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 15px;
    .list-item {
      background: #ffffff;
      box-sizing: border-box;
      padding: 10px 15px;
      border-radius: 7px;
      &:not(:first-of-type) {
        margin-top: 10px;
      }
      .item-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        > div:first-of-type {
          font-size: 14px;
        }
        > div:last-of-type {
          font-size: 10px;
        }
      }
      .item-info-s {
        margin-top: 10px;
        font-size: 10px;
        > div {
          display: flex;
          align-items: center;
          > span:first-of-type {
            color: #707070;
          }
          .copy-btn {
            margin-left: auto;
            background: #265efe;
            color: #ffffff;
            box-sizing: border-box;
            padding: 5px 15px;
            border-radius: 20px;
          }
        }
      }
      .num-box {
        display: flex;
        justify-content: space-around;
        border-top: 1px solid #f3f3f3;
        margin-top: 10px;
        box-sizing: border-box;
        padding: 10px 0;
        > div {
          display: flex;
          flex-flow: column;
          align-items: center;
          font-size: 10px;
          > span:last-of-type {
            margin-top: 5px;
            font-size: 12px;
            color: #265efe;
          }
        }
      }
      .item-footer-btn {
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #265efe;
        color: #ffffff;
        box-sizing: border-box;
        padding: 8px 0;
        border-radius: 20px;
        margin-top: 10px;
        > span {
          margin-left: 3px;
        }
      }
    }
  }
}
.yyzt0 {
  color: red;
}
.yyzt1 {
  color: #07c160;
}
.yyzt2 {
  color: #f76e33;
}
.smrz0 {
  color: red;
}
.smrz1 {
  color: #07c160;
}
</style>